<template>
  <div class="home">
    <!-- 底部产品展示区域 -->
    <!-- <van-list
      v-model="loading"
      :finished="finished"
      finished-text="别划了，到底了！"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-card
        v-for="product in productData.list"
        :key="product.id"
        :price="product.price + '.00'"
        :desc="product.description"
        :title="product.name"
        :thumb="product.photo"
      />
    </van-list> -->

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg4.tbcdn.cn%2Ftfscom%2Fi1%2F692463715%2FTB2vYb1tXXXXXafXpXXXXXXXXXX_%21%21692463715.jpg&refer=http%3A%2F%2Fimg4.tbcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628239351&t=f82b3e77710a7eee69a99c8166dab9c2"
          :style="{ transform: `scale(${props.distance / 80})` }"
        />
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img
          class="doge"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg4.tbcdn.cn%2Ftfscom%2Fi1%2F692463715%2FTB2vYb1tXXXXXafXpXXXXXXXXXX_%21%21692463715.jpg&refer=http%3A%2F%2Fimg4.tbcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628239351&t=f82b3e77710a7eee69a99c8166dab9c2"
        />
      </template>

      <!-- 加载提示 -->
      <template #loading>
        <img
          class="doge"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F11868d320ca8b9e3f0a424f3556695ea8bb083b6.jpg&refer=http%3A%2F%2Fi1.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628239040&t=e3fa32cdca57a27cbe0599e598dad902"
        />
      </template>

      <!-- 定义页面的结构 -->
      <div class="header-swipe">
        <!-- 顶部导航栏 -->
        <div class="header">
          <van-sticky>
            <van-nav-bar title="易洁家政" />
          </van-sticky>
        </div>
        <!-- 顶部轮播区域 -->
        <div class="swipe">
          <div class="swipeBox" style="height: 150px">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="swipe in swipeData" :key="swipe.id">
                <img :src="swipe.url" alt="" style="height: 100%" />
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </div>
      <!-- 菜单栏 -->
      <div class="menu">
        <div class="menuBox">
          <div class="menuItem">
            <van-grid :column-num="5">
              <van-grid-item
                v-for="(category, index) in categoryData"
                :key="index"
                :icon="category.icon"
                :text="category.name"
                @click="toCidPage(category.id, index)"
              />
            </van-grid>
          </div>
        </div>
      </div>

      <div class="van-list">
        <van-card
          v-for="product in productData.list"
          :key="product.id"
          :price="product.price + '.00'"
          :desc="product.description"
          :title="product.name"
          :thumb="product.photo"
        />
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";

import { Toast } from "vant";
export default {
  data() {
    return {
      page: 1,
      pageSize: 8,
      // 轮播图数组
      swipeData: [],
      //
      activeKey: 0,
      //加载
      loading: false,
      finished: false,
      isLoading: false,
      count: 0,
    };
  },
  computed: {
    // 引入栏目数据
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
  },
  methods: {
    //菜单栏
    toCidPage(id, index) {
      // console.log(id);
      // console.log(index);
      this.$router.push({
        path: "/manager/product",
        query: {
          productCategoryId: id,
          activeKey: index,
        },
      });
    },
    //加载
    onLoad() {
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;
        // console.log(this.productData.total);
        //判断 页面数 是否大于数据总数
        if (this.pageSize >= this.productData.total) {
          this.finished = true;
        }
        // 异步更新数据
        // console.log('load');
        this.pageSize += 8;
        // console.log(this.pageSize);
        this.queryProduct();
      }, 1500);
    },

    // 引入category vuex中的方法
    ...mapActions("category", ["getAllCategoryData"]),
    // 引入peoduct vuex中的方法
    ...mapActions("product", ["getAllProductData"]),
    // 获取所有轮播图的数据
    async getAllSwipeData() {
      let res = await get("/carousel/query", { status: "正常" });
      // 将拿到的数据赋值给轮播图数组
      this.swipeData = res.data.data;
    },
    // 查询栏目数据
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 5,
      };
      // 调用vuex中的方法 传参
      this.getAllCategoryData(data);
    },
    // 获取产品数据
    queryProduct() {
      let data = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.getAllProductData(data);
    },

    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        // this.count++;
        // 异步更新数据
        // console.log('load');
        this.pageSize += 50;
        // console.log(this.pageSize);
        this.queryProduct();
      }, 1500);
    },
  },
  created() {
    // 自动获取轮播图的数据
    this.getAllSwipeData();
    // 自动获取栏目数据
    this.queryCategory();
    // 自动获取产品数据
    this.queryProduct();
  },
};
</script>

<style lang='less'>
.home {
  position: relative;

}
.header-swipe {
  background: linear-gradient(to top, #df89b5 0%, #bfd9fe 100%);
  .header {
    top: 0;
    .van-sticky--fixed {
      // background: linear-gradient(to top, #bfd9fe 0%, #df89b5 100%);
      // border-bottom-left-radius: 10px;
      // border-bottom-right-radius: 10px;
      display: none;
    }
    position: relative;
    z-index: 999;
    .van-nav-bar {
      background: none;
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0px;
    }

    .van-ellipsis {
      height: 46px;
      line-height: 46px;
      font-size: 29px;

      color: #fff;
    }
  }
}

.swipe {
  .swipeBox {
    position: relative;
    z-index: 888;

    width: 90%;
    margin: 0 auto;
    // height: 160px;
    // position: absolute;
    // top: 136px;
    // left: 50%;
    // transform: translate(-50%,-50%);
    box-shadow: 0 0 10px 0 #aaa;
    border-radius: 10px;
    .my-swipe {
      border-radius: 10px;
      height: 100%;
    }
  }
}

.menu {
  // z-index: 1;
  box-shadow: 0 4px 8px 0 hsl(0deg, 0%, 100% / 20%);
  background-color: #fff;
  transition: 0.3s;
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: absolute;
  // margin: 150px 0 0 0;
  height: 150px;
  top: 140px;
  .menuBox {
    position: relative;
    height: 100%;
    .menuItem {
      position: absolute;
      bottom: 0px;
      width: 100%;
      .van-hairline--top::after {
        border-top-width: 0px;
      }
    }
  }
  .van-grid-item__content::after {
    z-index: 1;
    border-width: 0;
  }
}
.home {
  width: 100%;
  .van-list {
    width: 100%;
      padding-bottom: 10px;

    .van-list__loading {
      width: 100%;
    }
    .van-list__finished-text {
      width: 100%;
      display: block;
    }
    // .van-card:last-child {
    //   // float: left;
    //   // display: none;
    // }
    .van-card:first-child {
      margin-top: 8px;
    }
    .van-card:not(:first-child) {
      margin-top: 8px;
    }
  }
}
.van-list {
  // margin-top: 94px;
  margin-top: 85px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  // float: left;
}

.van-list .van-card {
  display: inline-block;
  width: 45%;
  box-sizing: border-box;
  box-shadow: rgb(234, 218, 255) 0px 0px 5px 0px;
  border-radius: 8px;
  padding: 8px;
  margin: 0 2.5vw;
}
.van-list .van-card:hover {
  box-shadow: 0 4px 6px 0 rgb(180, 122, 0 / 20%);
}
.van-card__bottom .van-card__price {
  color: red;
}

.van-card__title {
  font-size: 14px;
}

.van-list__loading,
.van-list__finished-text {
  margin: 0 auto;
}

/* 设置轮播区域的样式 */
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 200px;
}
.van-pull-refresh__head{
  background: linear-gradient(to top, #bfd9fe 0%, #bfd9fe 100%);

}
.doge {
  width: 140px;
  height: 100%;
  // margin-top: 8px;
  border-radius: 4px;
}
// .van-pull-refresh__head{
//   // height: auto;line-height:0;
// }
</style>